<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>报文编辑</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <script src="statics/libs/jquery.min.js"></script>
    <style type="text/css">
        .left {
            float: left;
            display: inline;
            width: 47%;
        }

        .center {
            float: left;
            display: inline;
            width: 6%;
            text-align: center;
            line-height: 300px;
        }

        .right {
            float: right;
            display: inline;
            width: 47%;
        }

        .fwihth {
            width: 100%;
        }

        .cwidth {
            width: 100%;
        }

        .height {
            height: 300px
        }

        .backcolor {
            background-color: #f0f0f0;
        }

        .border {
            border: 1px solid #A5C7FE;
            box-sizing: border-box;
        }
.rightspantitle{
 width: 18%;
text-align: left;
    display:-moz-inline-box;
    display:inline-block;
}

        .rightspanerr{
            width: 28%;
            text-align: left;
            float: right;
            display:-moz-inline-box;
            display:inline-block;
            background-color: red;
        }
    </style>
    <div class="fwihth height">
        <div class="left height border" spellcheck="false" contenteditable="true" id="lefttext">

        </div>
        <div class="center  height">
            <button id="check">校验--></button>
        </div>
        <div class="right   height">
            <div class="height fwihth backcolor" id="rightshow">
            </div>
        </div>
    </div>

    </body>

    <script>

        $(function () {


            $('#check').click(function () {
               /* if($("#s1").length > 0) {
                    msg= window.text;
                }else{*/
                var  msg = $("#lefttext").text();
                 /*   window.text = msg;

                }*/


                if(msg==undefined || msg=="" || msg==null||msg.replace(/\s+/g,"").length==0){
                    alert("请在左侧填入报文")
                    return;
                }
                function substr(str, len) {
                    if (!str || !len) {
                        return '';
                    }
// 预期计数：中文2字节，英文1字节
                    var a = 0;
// 循环计数
                    var i = 0;
// 临时字串
                    var temp = '';
                    for (i = 0; i < str.length; i++) {
                        if (str.charCodeAt(i) > 255) {
// 按照预期计数增加2
                            a += 2;
                        }
                        else {
                            a++;
                        }
// 如果增加计数后长度大于限定长度，就直接返回临时字符串
                        if (a > len) {
                            return temp;

                        }
// 将当前内容加到临时字符串
                        temp += str.charAt(i);
                    }
// 如果全部是单字节字符，就直接返回源字符串
                    return str;
                }

                //报关单号
                var entryid=substr(msg, 9);
                var entryidRegExp =/[0-9]{9}/;
                var entryiderr="";
                //

                if(!entryidRegExp.test(entryid)){
                    entryiderr="<span class='rightspanerr' >报关单号异常</span>";
                }
               msg=  msg.replace(entryid,'');

                //船名/航次
                var  trafname =substr(msg, 26);
                var trafnameRegExp =/[A-Z0-9]{1,26}/;
                var trafnameerr="";
                if(!trafnameRegExp.test(trafname)){
                    trafnameerr="<span class='rightspanerr' >船名/航次异常</span>";
                }
             msg=   msg.replace(trafname,'');

                //提单号
                var   billno =substr(msg, 19);
                var billnoRegExp =/[A-Z0-9\-/*]{1,19}/;
                var billnoerr="";
                if(!billnoRegExp.test(billno)){
                    billnoerr="<span class='rightspanerr' >提单号异常</span>";
                }
                msg=   msg.replace(billno,'');


                //申报单位编码
                var    declco =substr(msg, 10);
                var declcoRegExp =/[0-9A-Z]{10}/;
                var declcoerr="";
                if(!declcoRegExp.test(declco)){
                    declcoerr="<span class='rightspanerr' >申报单位编码异常</span>";
                }
                msg=   msg.replace(declco,'');


                //经营单位编码
                var    tradeco =substr(msg, 10);
                var tradecoRegExp =/[0-9A-Z]{10}/;
                var tradecoerr="";
                if(!tradecoRegExp.test(tradeco)){
                    tradecoerr="<span class='rightspanerr' >申报单位编码异常</span>";
                }
                msg=   msg.replace(tradeco,'');


                //申报单位名称
                var    declname =substr(msg, 31);
                var declnameRegExp =/[\u4e00-\u9fa5\uff08\uff09()]{1,30}/;
                var declnameerr="";
                if(!declnameRegExp.test(declname)){
                    declnameerr="<span class='rightspanerr' >申报单位名称异常</span>";
                }
                msg=   msg.replace(declname,'');
                //经营单位名称
                var    tradename =substr(msg, 31);
                var tradenameRegExp =/[\u4e00-\u9fa5\uff08\uff09()]{1,30}/;
                var tradenameerr="";
                if(!tradenameRegExp.test(tradename)){
                    tradenameerr="<span class='rightspanerr' >经营单位名称异常</span>";
                }
                msg=   msg.replace(tradename,'');

                //申报日期
                var    decldate =substr(msg, 6);
                var decldateRegExp = /(0[48]|[2468][048]|[13579][26])(0229|((0[13578]|1[02])(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)(0[1-9]|[12][0-9]|30))|(02(0[1-9]|[1][0-9]|2[0-8])))|([0-9][13579]|[13579][048]|[02468][26])(((0[13578]|1[02])(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)(0[1-9]|[12][0-9]|30))|(02(0[1-9]|[1][0-9]|2[0-8])))/;
                var decldateerr="";
                if(!decldateRegExp.test(decldate)){
                    decldateerr="<span class='rightspanerr' >申报日期异常</span>";
                }
                msg=   msg.replace(decldate,'');

                //处理状态
                var    processstatus =substr(msg, 10);
                var processstatusRegExp =/[\u4e00-\u9fa5]{1,10}/;
                var processstatuserr="";
                if(!processstatusRegExp.test(processstatus)){
                    processstatuserr="<span class='rightspanerr' >处理状态异常</span>";
                }
                msg=   msg.replace(processstatus,'');

                //采集时间
                var    coldate =substr(msg, 14);
                var coldateRegExp =/(([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})(((0[13578]|1[02])(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)(0[1-9]|[12][0-9]|30))|(02(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))0229)(([0|1][0-9])|(2[0-4]))/;
                var coldateerr="";
                if(!coldateRegExp.test(coldate)){
                    coldateerr="<span class='rightspanerr' >采集时间异常</span>";
                }
                msg=   msg.replace(coldate,'');

                //贸易方式
                var    trademode =substr(msg, 4);
                var trademodeRegExp =/[0-9]{4}/;
                var trademodeerr="";
                if(!trademodeRegExp.test(trademode)){
                    trademodeerr="<span class='rightspanerr' >贸易方式异常</span>";
                }
                msg=   msg.replace(trademode,'');

                //18位报关单号
                var    entryidnew =msg;
                var entryidnewRegExp =/[0-9]{4}20[0-9]{2}[0|1][0-9]{9}/;
                var entryidnewerr="";
                if(!entryidnewRegExp.test(entryidnew)){
                    entryidnewerr="<span class='rightspanerr' >报关单号异常</span>";
                }



                var tx = "<span id = 's1' name='1'>"+entryid +"</span>" +
                    "<span id='s2' name='2'>"+trafname+"</span>" +
                    "<span id='s3' name='3'>"+ billno+"</span>" +
                    "<span id = 's4' name='4'>"+ declco+"</span>"+
                    "<span id = 's5' name='5'>"+ tradeco+"</span>"+
                    "<span id = 's6' name='6'>"+ declname+"</span>"+
                    "<span id = 's7' name='7'>"+tradename+"</span>"+
                    "<span id = 's8' name='8'>"+ decldate+"</span>"+
                    "<span id = 's9' name='9'>"+ processstatus+"</span>"+
                    "<span id = 's10' name='10'>"+coldate+"</span>"+
                    "<span id = 's11' name='11'>"+ trademode+"</span>"+
                    "<span id = 's12' name='12'>"+ entryidnew+"</span>";
                var tx2 ="<span id = 'rs1' name='1'><span class='rightspantitle' id = 'rt1'>报关单号: </span>"+entryid +entryiderr+"</span></br>" +
                    "<span id='rs2' name='2'><span class='rightspantitle'id = 'rt2'>船名/航次: </span>"+trafname +trafnameerr+"</span></br> " +
                    "<span id='rs3' name='3'><span class='rightspantitle' id = 'rt3'>提单号: </span>"+ billno +billnoerr+"</span></br> " +
                    "<span id = 'rs4' name='4'><span class='rightspantitle'id = 'rt4'>申报单位编码: </span>"+ declco +declcoerr+"</span> </br>"+
                    "<span id = 'rs5' name='5'><span class='rightspantitle'id = 'rt5'>经营单位编码: </span>"+ tradeco +tradecoerr+"</span></br>"+
                    "<span id = 'rs6' name='6'><span class='rightspantitle'id = 'rt6'>申报单位名称:</span>"+ declname +declnameerr+"</span></br> "+
                    "<span id = 'rs7' name='7'><span class='rightspantitle'id = 'rt7'>经营单位名称: </span>"+tradename  +tradenameerr+"</span></br> "+
                    "<span id = 'rs8' name='8'><span class='rightspantitle'id = 'rt8'>申报日期: </span>"+ decldate +decldateerr+"</span></br> "+
                    "<span id = 'rs9' name='9'><span class='rightspantitle'id = 'rt9'>处理状态: </span>"+ processstatus +processstatuserr+"</span></br> "+
                    "<span id = 'rs10' name='10'><span class='rightspantitle'id = 'rt10'>采集时间: </span>"+coldate  +coldateerr+"</span></br> "+
                    "<span id = 'rs11' name='11'><span class='rightspantitle'id = 'rt11'>贸易方式:  </span>"+ trademode +trademodeerr+"</span> </br>"+
                    "<span id = 'rs12' name='12'><span class='rightspantitle'id = 'rt12'>18位报关单号:  </span>"+ entryidnew +entryidnewerr+"</span> ";

                $("#lefttext").html(tx);
                $("#rightshow").html(tx2);
            });


            $('#lefttext').on({
                mousemove: function () {
                   $(this).css("background-color", "yellow");

                    var names = $(this).attr("name");

                    $("#rs" + names).css("background-color", "yellow");
                    $("#rt" + names).css("background-color", "yellow");
                },
                mouseout: function () {
                   $(this).css("background-color", "#fff");
                    var names = $(this).attr("name");
                    $("#rs" + names).css("background-color", "#f0f0f0");
                    $("#rt" + names).css("background-color", "#f0f0f0");
                }
            }, 'span');


            $("#rightshow").on({
                mousemove: function () {
//                    $(this).css("background-color", "yellow");
                    var name = $(this).attr("name");
                    $("#s" + name).css("background-color", "yellow");
                    $("#rs" + name).css("background-color", "yellow");
                    $("#rt" + name).css("background-color", "yellow");
                },
                mouseout: function () {
//                    $(this).css("background-color", "#f0f0f0");
                    var name = $(this).attr("name");
                    $("#s" + name).css("background-color", "#fff");
                    $("#rs" + name).css("background-color", "#f0f0f0");
                    $("#rt" + name).css("background-color", "#f0f0f0");
                }


            }, "span")

        });
    </script>

</html>

